<template>
	<view class="contianer">
		<view class="title"><text class="st">*</text>关联表单</view>
		<view class="content-wrap">
			<view class="form-name">{{ title }}</view>
			<view class="list-item" v-for="(item, index) in data" :key="index">
				<view class="s-title">{{ item.key }}</view>
				<view class="s-value">{{
					formatValue(item.value, item.type)
				}}</view>
			</view>
		</view>
	</view>
</template>

<script>
const dayjs = require('@/common/dayjs.min.js')
export default {
	name: 'AssociateForm',
	props: {
		title: {
			type: String,
			default: '',
		},
		data: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {}
	},
	mounted() {
		console.log('ssss', this.data)
	},
	methods: {
		formatValue(value, type) {
			if (type === 'DATE') {
				return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
			} else if (type === 'CASCADER') {
				return Array.isArray(value) ? value.join('-') : value
			}
			return Array.isArray(value) ? value.join('-') : value
		},
	},
}
</script>

<style lang="scss" scoped>
.contianer {
	background: #fff;
	padding: 10rpx 20rpx;
	margin: 30rpx 0;
}
.content-wrap {
	border: 1px solid #eee;
	border-radius: 4rpx;
	padding: 6rpx 10rpx;
	margin-bottom: 10rpx;
}
.st {
	color: red;
	margin-right: 5rpx;
}
.title {
	font-size: 36rpx;
	margin-bottom: 20rpx;
	font-size: 32rpx;
	color: #606266;
}
.form-name {
	text-align: center;
	font-size: 32rpx;
	margin-bottom: 10rpx;
	padding: 15rpx 10rpx;
	color: #606266;
}
.list-item {
	margin-bottom: 20rpx;
	padding: 0 16rpx;

	.s-title {
		font-size: 28rpx;
		color: #9a9a9a;
		line-height: 1.5;
		margin-top: 20rpx;
	}
	.s-value {
		margin-top: 15rpx;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
		line-height: 1.5;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		border-bottom: 1px solid #eaeaea;
		word-break: break-all;
	}
	&:last-child {
		.s-value {
			border-bottom: none;
			padding-bottom: 10rpx;
		}
	}
}
</style>
